<template>
	<div class="add-pro-order">
		<div>
			<label>{{$t('route.Scheduling_management')}}</label>
			<div></div>
			<button><img /><label>{{ form.id ? $t('route.Edit_production_order_number') : $t('route.Add_production_order_number') }}</label></button>
		</div>
		<div>
			<el-form size="medium" style="width: 50%;" label-width="100px">
				<el-form-item :label="$t('route.Payment_Number')">
					<el-select class="width210px" v-model="form.styleId" filterable>
						<el-option v-for="item in styleOptions" :key="item.id" :label="item.code" :value="item.id" />
					</el-select>
					<el-button class="mgr-left-10" @click="jumpPage('add-style')" type="primary">{{$t('route.Add_style')}}</el-button>
				</el-form-item>
				<el-form-item :label="$t('route.Customer')">
					<el-input class="width210px" v-model="form.customer" />
				</el-form-item>
				<el-form-item :label="$t('route.amount')">
					<div>{{ allNum }}</div>
					<el-table :border="true" :row-style="{ height: 60 + 'px' }" :data="tableData">
						<el-table-column :label="$t('route.color')">
							<template #default="scope">
								<el-input v-model="scope.row.color" />
							</template>
						</el-table-column>
						<el-table-column :label="$t('route.size')">
							<template #default="scope">
								<el-input style="width: 100%;" v-model="scope.row.size" />
							</template>
						</el-table-column>
						<el-table-column :label="$t('route.amount')">
							<template #default="scope">
								<el-input @blur="numBlur" oninput="value=value.replace(/[^0-9]/g,'')"
									v-model="scope.row.num" />
							</template>
						</el-table-column>
						<el-table-column fixed="right" :label="$t('route.operate')" width="130">
							<template #default="scope">
								<el-button type="text" @click="deleteRow(scope.$index)">
									{{$t('route.Delete')}}
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="primary" style="width: 100%" @click="addItemClick">{{$t('route.new_column')}}</el-button>
				</el-form-item>

				<el-form-item :label="$t('route.SAM')">
					<el-input class="width210px" v-model="form.sam" oninput="value=value.replace(/[^0-9]/g,'')" />
				</el-form-item>

				<el-form-item :label="$t('route.group')">
					<el-cascader class="width210px" :placeholder="$t('route.Please_select_a_group')" :options="proLineOptions"
						@change="proLineChange" />
				</el-form-item>

				<el-form-item :label="$t('route.Launch_date')">
					<el-date-picker class="width210px" v-model="form.launchDate" type="date" :placeholder="$t('route.Select_date')" />
				</el-form-item>

				<el-form-item :label="$t('route.date_of_delivery')">
					<el-date-picker class="width210px" v-model="form.deliveryDate" type="date" :placeholder="$t('route.Select_date')" />
				</el-form-item>

				<el-form-item :label="$t('route.Target_output')">
					<el-input class="width210px" v-model="form.dailyNum" oninput="value=value.replace(/[^0-9]/g,'')" />
				</el-form-item>

				<el-form-item>
					<el-button @click='handleClick' type="primary">{{ form.id ? $t('route.modify') : $t('route.Add') }}</el-button>
				</el-form-item>
			</el-form>
		</div>


	</div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import i18n from '../../i18n/index';
export default {

	data() {
		return {
			tableData: [{
				color: null,
				size: null,
				num: 0,
			}],
			allNum: 0,
			proLineOptions: [],
			uploadUrl: api.UPLOAD_FILE + '?type=5',
			form: {
				styleId: null,
				icon: null,
				numList: [],
				customer: null,
				workshop: null,
				proLine: null,
				sam: 0,
				dailyNum: 0,
				launchDate: new Date(),
				deliveryDate: new Date(),
				remark: null,
			},
			styleOptions: []

		};
	},
	methods: {
		jumpPage(pathName, param) {
			this.$store.commit("setStyle", null);
			this.$router.push({
				name: pathName,
				params: {
					proOrder: JSON.stringify(param)
				}
			});
		},
		deleteRow(index) {
			this.tableData.splice(index, 1)
		},
		addItemClick() {
			this.tableData.push({
				color: null,
				size: null,
				num: 0,
			});
		},
		numBlur() {
			this.allNum = 0;
			for (var item of this.tableData) {
				this.allNum += parseInt(item.num);
			}
		},

		getPorLineRow() {
			http.post(api.GET_POR_LINE_ROW, {
				adminId: this.$store.state.user.id,
			}, data => {
				this.proLineOptions = data.data;
			});
		},
		proLineChange(value) {
			this.form.workshop = value[0];
			this.form.proLine = value[1];
		},
		handleClick() {
			if (CommonUtils.isEmpty(this.form.styleId)) {
				this.$message.error(i18n.global.t('route.Please_select_the_model_number'));
				return;
			}
			if (CommonUtils.isEmpty(this.form.customer)) {
				this.$message.error(i18n.global.t('route.Customer_cannot_be_empty'));
				return;
			}
			for (var item of this.tableData) {
				if (item.num == 0) {
					this.$message.error(i18n.global.t('route.Quantity_cannot_be0'));
					return;
				}
			}
			if (this.form.sam == 0) {
				this.$message.error(i18n.global.t('route.SAM_value_cannot_be_0'));
				return;
			}
			if (CommonUtils.isEmpty(this.form.proLine)) {
				this.$message.error(i18n.global.t('route.Group_cannot_be_empty'));
				return;
			}
			if (this.form.dailyNum == 0) {
				this.$message.error(i18n.global.t('route.Target_output_cannot_be0'));
				return;
			}
			if (this.form.id) {
				this.updateProOrder();
			} else {
				this.addProOrder();
			}

		},
		updateProOrder() {
			http.post(api.UPDATE_PRO_ORDER, {
				proOrderId: this.form.id,
				styleId: this.form.styleId,
				numList: JSON.stringify(this.tableData),
				workshop: this.form.workshop,
				proLine: this.form.proLine,
				launchDate: this.form.launchDate.format('yyyy-MM-dd'),
				deliveryDate: this.form.deliveryDate.format('yyyy-MM-dd'),
				remark: this.form.remark,
				customer: this.form.customer,
				sam: this.form.sam,
				dailyNum: this.form.dailyNum,
			}, data => {
				this.$message.success(i18n.global.t('route.Modified_successfully'));
			});
		},

		addProOrder() {
			http.post(api.ADD_PRO_ORDER, {
				adminId: this.$store.state.user.id,
				styleId: this.form.styleId,
				numList: JSON.stringify(this.tableData),
				workshop: this.form.workshop,
				proLine: this.form.proLine,
				launchDate: this.form.launchDate.format('yyyy-MM-dd'),
				deliveryDate: this.form.deliveryDate.format('yyyy-MM-dd'),
				remark: this.form.remark,
				customer: this.form.customer,
				sam: this.form.sam,
				dailyNum: this.form.dailyNum,
			}, data => {
				this.$message.success(i18n.global.t('route.Successfully_added'));
				this.$router.go(-1);
			});
		},
		getAllStyle() {
			http.post(api.GET_ALL_STYLE, {
				adminId: this.$store.state.user.id,
			}, data => {
				this.styleOptions = data.data;
			})
		},

	},
	created() {
		var proOrder = CommonUtils.getParam(this, 'proOrder', 'setProOrder');
		console.log(proOrder)
		if (proOrder && proOrder != "undefined") {
			this.form = JSON.parse(proOrder);
		}
		this.getPorLineRow();
		this.getAllStyle();
		if (this.form.id) {
			this.form.launchDate = new Date(this.form.launchDate);
			this.form.deliveryDate = new Date(this.form.deliveryDate);
			this.tableData = JSON.parse(this.form.numList);
			this.numBlur();
		}
	}
};
</script>
<style lang="scss" scoped>
.add-pro-order {
	color: #444444;
	font-size: 18px;
	padding-right: 20px;
	height: calc(100vh - 100px);
	// overflow: scroll;
	scrollbar-width: none;
	/* firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
	overflow-x: hidden;
	overflow-y: auto;

	.avatar {
		width: 130px;
		height: 130px;
	}

	>div:nth-of-type(1) {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;

		>label:nth-of-type(1) {
			font-weight: 600;
		}

		>div:nth-of-type(1) {
			width: 1px;
			background-color: #cccccc;
			height: 15px;
			margin: 0px 20px;
		}

		>button:nth-of-type(1) {
			background-image: url(../../assets/img/customer-1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 5px 10px;
			border: 0px;
			display: flex;
			color: #ffffff;
			flex-direction: row;
			align-items: center;
			font-weight: 800;

			>img {
				margin-right: 7px;
				width: 15px;
				height: 15px;
				content: url(../../assets/img/customer-2.png);
			}

		}
	}

	>div:nth-of-type(2) {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;

		.input {}

		.div-1 {
			display: flex;
			flex-direction: row;

			>label {
				margin-left: 10px;
				width: 200px;
			}
		}


	}





}
</style>
